<template>
  <slide-view v-loading="loading" :listener-ids="['workbench-main-container']" class="d-view" @close="hideView"
    style="width: 300px;">
    <div orient="vertical" class="detail-main">
      <flexbox direction="column" align="stretch" class="d-container">
        <wk-detail-header :subtitle="titleType" class="is-shadow" :title="detailInfo.content" :page-list="pageList"
          :dropdowns="headerHandler" @command="examineHandler">
          <template slot="left">
            <span style="margin-left: 5px;">
              {{ detailInfo.examineStatus == 8 ? '(已作废)' : detailInfo.examineStatus == 13 ? '(已终止)' : '' }}
            </span>
          </template>
        </wk-detail-header>
      </flexbox>
      <div class="d-container-body">
        <detail-head-base :list="headDetails" />
        <flexbox class="left-right-wrap is-hidden-right" align="stretch">
          <!-- added -->
          <div class="left" v-if="showLeft">
            <o-a-base-info
              :filed-list="fieldList"
              :highlight-changes="true" />
            <!-- 图片附件 -->
<!--            <div class="img-accessory">-->
<!--              <div class="img-box">-->
<!--                <img-->
<!--                  v-for="(item, index) in detailInfo.img"-->
<!--                  :key="index"-->
<!--                  v-src="item.url"-->
<!--                  class="main-img"-->
<!--                  @click="previewImage(detailInfo.img, index)">-->
<!--              </div>-->
<!--              <div class="accessory">-->
<!--                <file-cell-->
<!--                  :file-list="detailInfo.file"-->
<!--                  :show-time="false" />-->
<!--              </div>-->
<!--            </div>-->

            <div
                v-if="fileShow"
                class="files-box-detail">
              <div class="section-title">{{sectionTitle}}</div>
              <flexbox
                  :gutter="0"
                  wrap="wrap">
                <flexbox-item
                    v-for="(item, index) in fileList"
                    :key="index"
                    :span="1/2"
                    class="detail-cell">
                  <div class="detail-cell-box">
                    <div class="detail-cell-body">
                  <span>
                    <img
                        v-if="isShowImage(item.name)"
                        :key="item.url"
                        v-src="item.url">
                    <img
                        v-if="!isShowImage(item.name)"
                        :key="item.url"
                        v-src="getFileTypeIcon(item.url)">
                  </span>
                      <div class="body-handle">
                        <div class="handle-items">
                      <span
                          class="handle-item"
                          @click="previewFile(item, index)">
                        <i class="wk wk-icon-eye-solid" />
                      </span>
                        </div>
                      </div>
                    </div>
                    <flexbox class="detail-cell-footer">
                      <div
                          class="footer-name">{{ item.name }}</div>
                      <i
                          class="wk wk-b-download footer-item"
                          @click="handleDetailItemClick(item)" />
                    </flexbox>
                  </div>
                </flexbox-item>
              </flexbox>
            </div>
            <div v-if="!fileShow && isChange" class="no-data">暂无审核材料</div>

          </div>

          <div class="right">
            <examine-info-section :id="id" :examine-type="examineType" :record-id="detailInfo.examineRecordId"
              @on-handle="examineHandle" />
          </div>
        </flexbox>
      </div>
    </div>
    <examine-create-view v-if="isEdit" :category-id="detailInfo.categoryId" :type="detailInfo.type"
      :examine-type="examineType" :category-title="detailInfo.categoryTitle" :action="createAction"
      @save-success="saveSuccess" @hiden-view="isEdit = false" />
  </slide-view>
</template>

<script>
import {hrmExamineReadAPI, oaExamineDeleteAPI, oaExamineGetFieldAPI} from '@/api/oa/examine'
import {hrmDeptQueryNameMapAPI} from '@/api/hrm/dept'
import SlideView from '@/components/SlideView'
import WkDetailHeader from '@/components/Page/WkDetailHeader'
import DetailHeadBase from '@/views/oa/components/DetailHeadBase'
import OABaseInfo from '@/views/oa/components/OABaseInfo'
import ExamineInfoSection from '@/components/Examine/ExamineInfoSection'
import FileCell from '@/components/FileCell'
import ExamineCreateView from '../../examine/components/ExamineCreateView'
import CustomFieldsMixin from '@/mixins/CustomFields'
import { isEmpty } from '@/utils/types'
import {changePostModel} from '../../../hrm/employee/model/employee'
import {getFileIconWithSuffix, downloadFileWithBuffer} from "@/utils";
import {adminFileQueryByIdsAPI, adminFileDownAPI } from '@/api/admin/file'
import fa from "element-ui/src/locale/lang/fa";

export default {
  /** 详情 */
  name: 'Detail',
  components: {
    SlideView,
    WkDetailHeader,
    DetailHeadBase,
    OABaseInfo,
    ExamineInfoSection,
    FileCell,
    ExamineCreateView
  },
  mixins: [CustomFieldsMixin],
  props: {
    // 详情信息id
    id: [String, Number],
    pageList: Array, // 用于详情切换
    rowIndex: [String, Number],
    examineType: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      sectionTitle: "",
      isChange: false,
      fileShow: false,
      editDetailIndex: -1,
      editInputContent: '',
      fileList: [],
      loading: false,
      detail: null,
      fieldList: [], // 基本信息
      showLeft: false,
      categoryName: '',
      titleObj: {
        upcoming: '待办',
        track: '跟踪',
        archive: '归档',
        draft: '草稿'
      },
      detailInfo: {},

      isEdit: false,
      createAction: { type: 'update' },
      headDetails: null
    }
  },
  computed: {
    titleType() {
      return this.titleObj[this.examineType]
    },
    headerHandler() {
      const moreHandles = []
      const permission = this.detailInfo ? this.detailInfo.permission : null
      if (permission) {
        if (permission.isUpdate === 1) {
          moreHandles.push({ name: '编辑', command: 'edit' })
        }
        if (permission.isDelete === 1) {
          moreHandles.push({ name: '删除', command: 'delete' })
        }
      }
      moreHandles.push({ name: '打印', command: 'print' })
      return moreHandles
    }
  },
  watch: {
    id: {
      handler() {
        this.getDetail()
      },
      immediate: true
    }
  },
  created() {
  },
  mounted() { },
  methods: {
    // 执行编辑操作
    handleDetailItemClick(item) {
      adminFileDownAPI(item.fileId).then(res => {
        downloadFileWithBuffer(res.data, item.name)
      }).catch(() => {
      })
    },
    // 预览图片
    previewFile(item, index) {
      if (item.name.toLowerCase().endsWith('.pdf')) {
        adminFileDownAPI(item.fileId).then(res => {
          try {
            const blob = new Blob([res.data], { type: 'application/pdf' })
            const fileURL = window.URL.createObjectURL(blob)

            // 创建一个隐藏的a标签来打开PDF
            const link = document.createElement('a')
            link.href = fileURL
            link.target = '_blank'
            link.style.display = 'none'
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link)

            // 清理URL对象
            setTimeout(() => {
              window.URL.revokeObjectURL(fileURL)
            }, 100)
          } catch (error) {
            console.error('PDF预览错误:', error)
            this.$message.error('PDF预览失败')
          }
        }).catch(error => {
          console.error('获取PDF失败:', error)
          this.$message.error('获取PDF失败')
        })
      } else {
        this.$wkPreviewFile.preview({
          index: index,
          data: this.fileList
        })
      }
    },
    getFileTypeIcon(url) {
      const temps = url ? url.split('.') : []
      var ext = ''
      if (temps.length > 0) {
        ext = temps[temps.length - 1]
      } else {
        ext = ''
      }
      return getFileIconWithSuffix(ext)
    },
    isShowImage(name) {
      const temps = name ? name.split('.') : []
      var ext = ''
      if (temps.length > 0) {
        ext = temps[temps.length - 1]
      } else {
        ext = ''
      }
      return ['jpg', 'png', 'gif', 'jpeg'].includes(ext.toLowerCase())
    },
    /**
     * 获取基本信息
     */
    getBaseInfo() {
      this.loading = true
      const params = {
        examineId: this.detailInfo.examineId,
        isDetail: 1,
        type: 1
      }
      oaExamineGetFieldAPI(params)
        .then(res => {
          const list = res.data || []

          list.forEach(item => {
            this.getFormItemDefaultProperty(item, false)
            if (item.fieldName == 'submitDeptId' && item.value.length) {
              this.headDetails[1].value = item.value[0].name || ''
            }

            if (item.formType === 'detail_table') {
              if (!isEmpty(item.value)) {
                item.value = this.getItemValue(item, null, 'update')
              }
              // allForm[item.field] = item.value
            }
          })

          this.fieldList = [
            { name: '基本信息', list }
          ]
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    getDetail() {
      hrmExamineReadAPI(this.id).then(async res => {
        this.sectionTitle = '审核材料'
        this.fieldList = []
        this.fileShow = false
        this.isChange = false
        this.detailInfo = res.data || {}
        this.headDetails = [
          { title: '审批名称', value: this.detailInfo.content },
          { title: '提交部门', value: '' },
          { title: '审批类型', value: this.detailInfo.categoryTitle },
          { title: '提交人', value: this.detailInfo.createUser.realname }
        ]
        if(res.data.formJson && res.data.formJson != null && res.data.formJson != '') {

          try{
            let formJson = JSON.parse(res.data.formJson)
            const optionFieldMap = { // 先写死
                '性别': { '1': '男', '2': '女' },
                '员工归属': { '0': '集团系统内', '1': '合作方人员', '2': '其他人员' },
                '试用期': { "0":"无试用期","1":"1个月","2":"2个月","3":"3个月","4":"4个月","5":"5个月","6":"6个月" },
                '最高学历': {"1":"小学","2":"初中","3":"高中","4":"中专","5":"大专","6":"大学","7":"硕士研究生","8":"博士研究生"},
                '调动原因': {"1":"组织架构调整","2":"个人申请","3":"工作安排","4":"违规违纪","5":"绩效不达标","6":"个人身体原因","7":"不适应当前岗位"},
                '调动类型': {"5":"调岗","6":"晋升","7":"降级"},
              }
            if (res.data.label === 100){
              let dataList = [
                {
                  "value": formJson.oldPostLevel,
                  "name": "原职位层级",
                },
                {
                  "value": formJson.newPostLevel,
                  "name": "变更为",
                  "changed": formJson.newPostLevel && formJson.newPostLevel !== formJson.oldPostLevel
                },
              ]
              if (formJson.materialList != null && formJson.materialList.length > 0){
                this.fileShow = true;
                let fileIdList = formJson.materialList.map(item => {
                  return item.fileId;
                })
                let fileResult = await adminFileQueryByIdsAPI(fileIdList).catch(() => {});
                this.fileList = fileResult.data;
              }
              this.fieldList = [
                { name: '职位层级调整信息',
                  list: dataList,
                },
              ]
            } else if (res.data.label === 99){
              let authPostFields = ["join_company_time", "work_forms", "dept", "org"];
              let authBaseFields = ["id_number", "nation", "sex", "date_of_birth", "employee_name", "join_company_time", "join_work_time", "source"];
              let baseList = [];
              let postList = [];
              let originallyBase = [];
              let originallyPost = [];
              formJson.baseParams.dataList.forEach(item => {
                if (authBaseFields.includes(item.fieldName)) {
                  item.value = item.fieldValue
                  if (optionFieldMap[item.name]) {
                    item.value = optionFieldMap[item.name][item.value] || ''
                  }
                  baseList.push(item)
                }
              })
              formJson.postParams.dataList.forEach(item => {
                if (authPostFields.includes(item.fieldName)) {
                  if (item.fieldName === 'dept' || item.fieldName === 'org') {
                    item.value = item.fieldValueDesc
                  } else {
                    item.value = item.fieldValue
                  }
                  if (optionFieldMap[item.name]) {
                    item.value = optionFieldMap[item.name][item.value] || ''
                  }
                  postList.push(item)
                }
              })
              if (formJson.originallyBase != null && formJson.originallyBase.length > 0){
                formJson.originallyBase.forEach(item => {
                  if (authBaseFields.includes(item.fieldName)) {
                    item.value = item.fieldValue
                    if (optionFieldMap[item.name]) {
                      item.value = optionFieldMap[item.name][item.value] || ''
                    }
                    originallyBase.push(item)
                  }
                })
              }
              if (formJson.originallyPost != null && formJson.originallyPost.length > 0){
                formJson.originallyPost.forEach(item => {
                  if (authPostFields.includes(item.fieldName)) {
                    if (item.fieldName === 'dept' || item.fieldName === 'org') {
                      item.value = item.fieldValueDesc[0].deptName
                    } else {
                      item.value = item.fieldValue
                    }
                    if (optionFieldMap[item.name]) {
                      item.value = optionFieldMap[item.name][item.value] || ''
                    }
                    originallyPost.push(item)
                  }
                })
              }
              if (originallyPost.length > 0){
                this.fieldList.push({ name: '原岗位信息', list: originallyPost})
              }
              this.fieldList.push({ name: '调整岗位信息', list: postList})
              if (originallyBase.length > 0){
                this.fieldList.push({ name: '原基本信息', list: originallyBase})
              }
              this.fieldList.push({ name: '调整基本信息', list: baseList})
              // 比较并标记变化的字段
              if (originallyPost.length > 0 && postList.length > 0) {
                postList.forEach(item => {
                  const originalItem = originallyPost.find(orig => orig.fieldName === item.fieldName)
                  if (originalItem && originalItem.value !== item.value) {
                    item.changed = true
                  }
                })
              }

              if (originallyBase.length > 0 && baseList.length > 0) {
                baseList.forEach(item => {
                  const originalItem = originallyBase.find(orig => orig.fieldName === item.fieldName)
                  if (originalItem && originalItem.value !== item.value) {
                    item.changed = true
                  }
                })
              }
            } else if (res.data.label === 98){
              let originallyBase = [];
              if (formJson.originalDataList != null && formJson.originalDataList.length > 0) {
                originallyBase = formJson.originalDataList.map(item => {
                  item.value = item.fieldValue
                  if(optionFieldMap[item.name]) {
                    item.value = optionFieldMap[item.name][item.value] || ''
                  }
                  return item
                })
                this.fieldList.push({
                  name: '原基本信息', list: originallyBase
                })
              }
              let fieldDataList = formJson.dataList.map(item => {
                item.value = item.fieldValue
                if(optionFieldMap[item.name]) {
                  item.value = optionFieldMap[item.name][item.value] || ''
                }
                return item
              })
              if (fieldDataList.findIndex(item => item.fieldName === 'pol_time') < 0){
                fieldDataList.splice(6, 0, {fieldName: 'pol_time', name: '入党日期', value: ''})
              }
              this.fieldList.push(
                { name: '调整基本信息',
                  list: fieldDataList
                }
              )
              // 比较并标记变化的字段
              if (originallyBase.length > 0 && fieldDataList.length > 0) {
                fieldDataList.forEach(item => {
                  const originalItem = originallyBase.find(orig => orig.fieldName === item.fieldName)
                  if (originalItem && originalItem.value !== item.value) {
                    item.changed = true
                  }
                })
              }
            }else if (res.data.label === 91 || res.data.label === 96 || res.data.label === 94 || res.data.label === 95){
              this.sectionTitle = '异动材料'
              this.isChange = true
              if (formJson.changeRecord != null && formJson.changeRecord !== "") {
                let deptResult = await hrmDeptQueryNameMapAPI().catch(() => {});
                let deptMap = deptResult.data;
                let formAddFields = changePostModel.fieldsFunc(1,1);
                formAddFields.forEach(item => {
                  if (item.field === 'oldDept' || item.field === 'newDept' || item.field === 'oldOrg' || item.field === 'newOrg') {
                      let deptName = '';
                      if(deptMap[formJson.changeRecord[item.field]]){
                        deptName = deptMap[formJson.changeRecord[item.field]];
                      }
                      item.value = deptName
                  }else {
                    item.value = formJson.changeRecord[item.field]
                    if (optionFieldMap[item.name]) {
                      item.value = optionFieldMap[item.name][item.value] || ''
                    }
                  }
                })
                this.fieldList.push({ name: '人员调动', list: formAddFields})
                if (formJson.changeRecord.materialList != null && formJson.changeRecord.materialList.length > 0){
                  this.fileShow = true;
                  let fileIdList = formJson.changeRecord.materialList.map(item => {
                    return item.fileId;
                  })
                  let fileResult = await adminFileQueryByIdsAPI(fileIdList).catch(() => {});
                  this.fileList = fileResult.data;
                }
              }
            } else if (res.data.label === 92 || res.data.label === 97) {
              this.sectionTitle = '入职材料'
              this.isChange = true
              let baseList = [];
              let postList = [];
              if (formJson.addEmployeeFieldManageBO != null && formJson.addEmployeeFieldManageBO !== "") {
                let deptResult = await hrmDeptQueryNameMapAPI().catch(() => {
                });
                let deptMap = deptResult.data;
                formJson.addEmployeeFieldManageBO.employeeFieldList.forEach(item => {
                  item.value = item.fieldValue
                  if (optionFieldMap[item.name]) {
                    item.value = optionFieldMap[item.name][item.value] || ''
                  }
                  baseList.push(item)
                })
                formJson.addEmployeeFieldManageBO.postFieldList.forEach(item => {
                  if (item.fieldName === 'dept' || item.fieldName === 'org') {
                    let deptName = '';
                    if(deptMap[item.fieldValue]){
                      deptName = deptMap[item.fieldValue];
                    }
                    item.value = deptName
                  } else {
                    item.value = item.fieldValue
                  }
                  if (optionFieldMap[item.name]) {
                    item.value = optionFieldMap[item.name][item.value] || ''
                  }
                  postList.push(item)
                })
                this.fieldList.push({name: '个人信息', list: baseList});
                this.fieldList.push({name: '岗位信息', list: postList});
                if (formJson.addEmployeeFieldManageBO.materialList != null && formJson.addEmployeeFieldManageBO.materialList.length > 0) {
                  this.fileShow = true;
                  let fileIdList = formJson.addEmployeeFieldManageBO.materialList.map(item => {
                    return item.fileId;
                  })
                  let fileResult = await adminFileQueryByIdsAPI(fileIdList).catch(() => {
                  });
                  this.fileList = fileResult.data;
                }
              }
            }
            this.showLeft = true
          }catch (e) {
            console.log(e)
          }
        } else {
          this.showLeft = false
        }
        // this.getBaseInfo()
      }).catch(() => {
        this.loading = false
      })
    },
    /**
     * 详情页面切换
     */
    pageChange(type) {
      if (type === 'left') {
        if (this.rowIndex > 0) {
          let pageIndex = this.rowIndex
          this.$emit('update:rowIndex', --pageIndex)
        } else {
          this.$message.error('没有更多了')
        }
      } else {
        if (this.rowIndex < this.pageList.length - 1) {
          let pageIndex = this.rowIndex
          this.$emit('update:rowIndex', ++pageIndex)
        } else {
          this.$message.error('没有更多了')
        }
      }
    },
    /**
     * 预览图片
     */
    previewImage(list, index) {
      this.$wkPreviewFile.preview({
        index: index,
        data: list
      })
    },

    /**
     * @description: 编辑
     * @return {*}
     */
    examineHandler(type) {
      if (type == 'edit') {
        this.isEdit = true
        this.createAction.data = {
          batchId: this.detailInfo.batchId,
          img: this.detailInfo.img || [],
          file: this.detailInfo.file || [],
          businessList: this.detailInfo.businessList || [],
          contactsList: this.detailInfo.contactsList || [],
          customerList: this.detailInfo.customerList || [],
          contractList: this.detailInfo.contractList || [],
          receivablesList: this.detailInfo.receivablesList || []
        }
        this.createAction.id = this.detailInfo.examineId

        // 传递审批状态以及recordId
        this.createAction.examineInfo = {
          examineStatus: this.detailInfo.examineStatus,
          recordId: this.detailInfo.examineRecordId
        }
      } else if (type === 'delete') {
        this.$confirm('确定删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            oaExamineDeleteAPI({
              examineId: this.id
            }).then(res => {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.$emit('success')
              this.hideView()
            })
          })
          .catch(() => {
          })
      } else if (type === 'print') {
        this.$router.push({
          name: 'examinePrint',
          query: {
            id: this.detailInfo.examineId,
            templateId: this.detailInfo.categoryId
          }
        })
      }
    },
    saveSuccess(data) {
      this.getDetail()
      this.$emit('success')
      if (data == 'save') {
        this.hideView()
      }
    },
    examineHandle(data) {
      if (data == 'archive' || data == 'cancellation') {
        this.hideView()
      }
      this.getDetail()
      this.$store.dispatch('GetBacklogNum')
      this.$emit('success')
    },
    /**
     * 点击关闭按钮隐藏视图
     */
    hideView() {
      this.$emit('hide-view')
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../styles/content.scss";

.detail-main {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  overflow-y: overlay;
}

.d-view {
  position: fixed;
  top: $--detail-view-top;
  right: 0;
  bottom: 0;
  width: $--detail-width-base;
  min-width: 950px;
  padding: 24px;
  background-color: white;

  ::v-deep .el-card__body {
    height: 100%;
  }
}

.detail-header {
  .header-icon {
    width: 36px;
    height: 36px;
    margin-right: 8px;
    line-height: 36px;
    text-align: center;
    border-radius: $--border-radius-base;

    .wk {
      font-size: 26px;
      color: white;
    }
  }

  .header-name {
    flex: 1;
    font-size: 16px;
    font-weight: 600;
  }
}

.d-container-body {
  flex: 1;
  margin-top: 8px;
  overflow: auto;

  .detail-head-base {
    padding: 16px;
    background-color: $--color-n20;
    border-radius: 3px;

    ::v-deep .base-item {
      flex: 0 0 25%;
    }
  }

  .no-data {
    padding: 32px 0;
    color: #999;
    text-align: center;
    font-size: 14px;
  }

  .left-right-wrap {
    margin-top: 15px;

    .left {
      flex: 1;
      padding-right: 40px;

      // 图片 附件
      .img-accessory {
        padding: 0 12px 0 20px;
        margin-bottom: 5px;
        margin-bottom: 10px;
        font-size: 12px;

        .img-box {
          position: relative;
          margin-top: 40px;

          img {
            width: 200px;
            cursor: pointer;
          }
        }

        .accessory {
          margin-top: 25px;
          margin-bottom: 20px;
          color: #2362fb;

          .wukong-file {
            font-size: 13px;
          }
        }
      }

      .b-cont {
        height: unset;
      }

      // 基本信息
      .detail-head-base {
        padding: #{$--interval-base * 2};
        margin-bottom: 16px;
        background-color: $--color-n20;
        border-radius: $--border-radius-base;

        ::v-deep .base-item {
          flex: 0 0 25%;
        }
      }
    }

    .right {
      flex-shrink: 0;
      width: 280px;
    }
  }
  .files-box-detail {
    position: relative;
    padding: 16px 8px;

    .section-title {
      margin-bottom: 16px;
      font-size: 14px;
      font-weight: 600;
      color: #333;
    }
  }


  /** 详情cell */
  .detail-cell {
    position: relative;
    padding-right: 40px;
    padding-bottom: 20px;

    /** 详情 */
    .cell-upload-box {
      padding: 5px;
      border: 1px solid $--border-color-base;
      border-radius: 2px;

      .upload-icon {
        display: inline-block;
        margin-top: 25px;
        font-size: 40px;
        color: #777;
      }

      .upload-name {
        margin-top: 5px;
        color: #777;
      }
    }

    .detail-cell-box {
      padding: 5px;
      border: 1px solid $--border-color-base;
      border-radius: 2px;

      .detail-cell-body {
        position: relative;
        overflow: hidden;
        border-radius: 2px;

        span {
          display: block;
          width: 100%;
          text-align: center;

          img {
            width: auto;
            height: 100px;
            min-height: 100px;
            overflow: hidden;
            border-style: none;
          }
        }

        .body-handle {
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          z-index: 2;
          display: none;
          background-color: rgba(0, 0, 0, 0.5);

          .handle-items {
            margin-top: 35px;
            text-align: center;

            .handle-item {
              display: inline-block;
              width: 30px;
              height: 30px;
              line-height: 30px;
              cursor: pointer;
              background-color: rgba(0, 0, 0, 0.5);
              border-radius: 15px;

              i {
                color: white;
              }
            }
          }
        }
      }

      .detail-cell-body:hover {
        .body-handle {
          display: block;
        }
      }

      .detail-cell-footer {
        padding-top: 5px;

        .footer-name {
          display: flex;
          flex: 1;
          width: 130px;
          height: 14px;
          margin-right: 5px;
          overflow: hidden;
          color: $--color-text-primary;
          text-overflow: ellipsis;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
        }

        .el-input {
          ::v-deep input {
            height: 24px;
            line-height: 24px;
          }
        }

        .footer-item {
          flex-shrink: 0;
          padding: 3px;
          color: #777;
          cursor: pointer;

          &:hover {
            color: $--color-primary;
          }
        }
      }
    }
  }

  /** 拖拽上传 */
  .cell-upload-box ::v-deep .el-upload {
    display: block;
  }

  .cell-upload-box ::v-deep .el-upload-dragger:hover {
    border-color: $--color-primary;
  }

  .cell-upload-box ::v-deep .el-upload-dragger {
    width: 100%;
    height: 131px;
    border-radius: 2px;
  }


  ::v-deep{
    .crop-wrap{
      width: 453px;
      height: 413px;
    }
  }
}
</style>

